<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- <link rel="stylesheet" href="../static/css/my_index_sty.css"> -->
    <link rel="stylesheet" href="../static/css/bootstrap.min.css">
    <link rel="stylesheet" href="../static/css/index.css">
    <style>
        body {
            /* url() 为自定义鼠标样式路径 */
            cursor: url(../static/image/pointer.png),auto;
        }
    </style>
</head>
<body>
    <!-- <div id="container" class="shadow p-3 mb-5 bg-white rounded">
        <!-- 发表盒子 --
        <div id="pl">
            <div id="top">
                
                <img src="../static/image/contradiction.jpg" alt="">
                <label for="My_username" aria-readonly="true">
                    UserName
                </label>

                <label id="char_length">
                    0/5000  
                </label>
            </div>
            <div id="fb_text">
              
            </div>
        </div>

        <div id="model">

            <div  style="text-align: right;">
                <button type="button" class="btn btn-outline-info">发表</button>
            </div>
        </div>
        
    </div> -->


    <div class="container" style="margin-top: 2rem; margin-bottom: 2rem;"> 
        <div class="row">
            <div class="col-sm">

            </div>

            <div class="col-sm">
                <div class="card" style="width: 50rem;">
                    <!-- 头部 -->
                    <div class="card-body">
                        <div class="row">
                            <div class="col-sm-4 d-flex justify-content-start">
                                <button type="button" class="btn btn-info btn-sm shadow" style="width: 5rem;height: 2rem;margin-top: 1rem;" data-toggle="modal"
                                    data-target="#saysomething">发表说说</button>
                            </div>
                            <div class="col-sm-4 d-flex justify-content-center">
                                <p style="margin-top: 1.5rem;">当前用户：XXXXX</p>
                            </div>
                            <div class="col-sm-4 d-flex justify-content-end">
                                <button type="button" class="btn btn-info btn-sm shadow"  style="width: 3rem;height: 2rem;margin-top: 1rem;">注销</button>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card" style="width: 50rem;">

                    <!-- 内容 -->
                    <div class="card-body">
                        <div class="row">
                            <div class="col-sm"  style="border-radius:0.5rem;background-color: snow; margin-left: 1rem;">
                                <p style="margin-top: 1rem;"></p>
                                <p style="margin-top: 1rem;"></p>
                                <p style="margin-top: 3rem;">趁现在还有等待</p>
                                <p style="margin-top: 1rem;"></p>
                                <p style="margin-top: 1rem;"></p>
                            </div>
                            
                            <div class="col-sm-1" style="margin-top: 0.5rem;">
                                <button type="button" class="btn btn-info btn-sm shadow" data-toggle="modal"
                                    data-target="#comment" style="margin-left: 1.7rem;">吐槽一下</button>
                            </div>

                            <!-- <div class="col-sm-10">
                                <div class="alert alert-success w-auto" role="alert">今天看了部电影，我的姐姐，挺好看的。。。。。</div>
                            </div> -->
                        </div>
                    </div>
                    
                    <!-- 评论 -->
                    <div class="card-body">
                        <ul class="list-group list-group-flush">
                            <li class="list-group-item">
                                <blockquote class="blockquote mb-0" >
                                    <p>我去，看电影也不带我去。。。 </p>
                                    <footer class="blockquote-footer">
                                        <cite title="Source Title">胡晓光</cite>&nbsp;&nbsp;对
                                        <cite title="Source Title">张无忌</cite>&nbsp;&nbsp;说
                                    </footer>
                                </blockquote>
                            </li>
                            <li class="list-group-item" >
                                <blockquote class="blockquote mb-0">
                                    <p>兄弟太不够意思了。。。。</p>
                                    <footer class="blockquote-footer">
                                        <cite title="Source Title">张明敏</cite>&nbsp;&nbsp;对
                                        <cite title="Source Title">张无忌</cite>&nbsp;&nbsp;说
                                    </footer>
                                </blockquote>
                            </li>
                            <li class="list-group-item" >
                                <blockquote class="blockquote mb-0">
                                    <p>太过分了。。。。</p>
                                    <footer class="blockquote-footer">
                                        <cite title="Source Title">赵敏</cite>&nbsp;&nbsp;对
                                        <cite title="Source Title">张无忌</cite>&nbsp;&nbsp;说
                                    </footer>
                                </blockquote>
                            </li>
                            <li class="list-group-item">
                                <blockquote class="blockquote mb-0">
                                    <p>姐姐，太不够意思了哈，补上补上。。。 </p>
                                    <footer class="blockquote-footer">
                                        <cite title="Source Title">邓超</cite>&nbsp;&nbsp;对
                                        <cite title="Source Title">张无忌</cite>&nbsp;&nbsp;说
                                    </footer>
                                </blockquote>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="col-sm">

            </div>
        </div>

        <!-- 发表说说  -->
        <div class="modal fade" id="saysomething" data-backdrop="static" data-keyboard="false" tabindex="-1"
            aria-labelledby="saysomethingLabel" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content">
                    <div class="modal-header">
                        <h3 class="modal-title" id="saysomethingLabel">发表内容</h3>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <div class="form-group">
                            <label for="exampleFormControlTextarea1">说点想说的...</label>
                            <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                        <button type="button" class="btn btn-success">确认发表</button>
                    </div>
                </div>
            </div>
        </div>

        <!-- 吐槽一下 -->
        <div class="modal fade" id="comment" data-backdrop="static" data-keyboard="false" tabindex="-1"
            aria-labelledby="commentLabel" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content">
                    <div class="modal-header">
                        <h3 class="modal-title" id="commentLabel">发表说说内容</h3>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <div class="form-group">
                            <label for="exampleFormControlTextarea1">说点想说的...</label>
                            <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                        <button type="button" class="btn btn-success">确认发表</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="../static/js/bootstrap.min.js"></script>
    <script src="../static/js/jquery-3.5.1.min.js"></script>
    <!-- <script src="../static/js/a.js"></script>
    <script src="../static/js/b.js"></script> -->
    <!-- <script>
        $(document).ready(function(){
            $("#de").click(function(){
                $(location).attr("href", "login.html")
            });
        })
    </script> -->

    <script>
         // 保存当前说说的id
         let currentMsgId='';
        function sayComment(msgId){
            currentMsgId=msgId;
        }
        // 发表说说
        function saysay() {
            axios({
                method: 'post',
                url: '/say',
                data:{
                    sayMsg:$('#sayMsg').val()
                }
            }).then(function (response) {
                // axios工具下，服务器真正返回的数据在返回对象的data中
                let res = response.data;
                console.log(res);
                if (res.code === 200) {
                    // window.location.href = '/login';
                }
            }).catch((err) => {

            });
        }
        // 吐槽一下
        function comment() {
            axios({
                method: 'post',
                url: '/comment',
                data:{
                    commentMsg:$('#commentMsg').val(),
                    msgId:currentMsgId
                },
            }).then(function (response) {
                // axios工具下，服务器真正返回的数据在返回对象的data中
                let res = response.data;
                console.log(res);
                if (res.code === 200) {
                    // window.location.href = '/login';
                }
            }).catch((err) => {

            });
        }
        // 注销登录
        function logout() {
            axios({
                method: 'post',
                url: '/logout'
            }).then(function (response) {
                // axios工具下，服务器真正返回的数据在返回对象的data中
                let res = response.data;
                if (res.code === 200) {
                    window.location.href = '/login';
                }
            }).catch((err) => {

            });
        }
    </script>

</body>
</html>